<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定位</title>
    <style>
        /* 
            1.默认文档流特点 默认定位 静态定位
                1.在文档中从上而下进行布局
                2.块级元素独占一行,默认占满父元素宽度100%
                3.行内元素共享一行，占满之后换行
        */
        div {
            width: 100px;
            height: 100px;
            background-color: red;
        }

        .two {
            background-color: aqua;
            /* 固定定位 */
            position: fixed;
            /* 
                脱离文档流 原先位置不保留 相对于视口区域进行定位 
                如果没有使用定位属性 就在原先位置定位
            */
            /* top: 10px; */
            bottom: 10px;
            right: 10px;
        }

        .three {
            background-color: blueviolet;
            /* 相对定位 */
            position: relative;
            /* 不脱离文档流 保留原先位置 使用了定位属性 相对于原先位置定位 */
            bottom: 10px;
            left: 10px;
            z-index: 2;
        }

        .four {
            background-color: brown;
            /* 绝对定位 */
            position: absolute;
            /* 脱离文档流 不保留原先位置 
                1.如果有祖先定位元素，则根据最近的祖先定位元素进行定位
                2.如果没有祖先定位元素，则根据浏览器视口区域进行定位
            如果没有使用定位属性 则在原来位置定位
            */
            top: 20px;
            left: 20px;
            /* 更改元素层叠顺序 */
            z-index: -10;
        }

        .five {
            background-color: cadetblue;
            /* 粘性定位 */
            position: sticky;
            /* sticky:relative+fixed */
            /* 不脱离文档流 使用了定位属性后 刚开始相对定位 滚动到一定位置固定定位 */
            top: 20px;
            left: 20px;
        }
        /* 定位特点
            1.默认定位,静态定位
            2.相对定位 relative 
                不脱离文档流 原先位置保留 使用了定位属性后 相对于原来位置进行定位
            3.固定定位 fixed
                脱离文档流 原先位置不保留 相对与视口区域进行定位 如果没有使用定位属性
                则在原先位置定位
            4.绝对定位 absolute 
                脱离文档流 原先位置不保留 如果有祖先定位元素,则根据最近的祖先定位元素进行定位
                如果没有祖先定位元素,则根据浏览器视口区域进行定位
            5.粘性定位 sticky
                不脱离文档流 如果使用了定位属性 刚开始是相对定位 滚动到一定位置和变成了固定定位
            6.更改元素层叠顺序
                z-index
        */  
    </style>
</head>

<body>
    <div class="one">静态定位,默认定位</div>
    <div class="two">固定定位</div>
    <div class="three">相对定位</div>
    <div class="four">绝对定位</div>
    <div class="five">粘性定位</div>
    <div class="six">静态定位,默认定位</div>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>end
</body>

</html>